<template>
  <div>
      <el-button type="primary" round @click="showAddPaeg">添加目录</el-button>
    <!--表格内容 -->
    <el-table
      ref="list"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      stripe
      highlight-current-row
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :default-sort="{prop: 'date', order: 'descending'}"
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone">
      <el-table-column
        property="moduleName"
        label="菜单名称">
      </el-table-column>
      <el-table-column
        property="optValue"
        label="权限码">
      </el-table-column>
      <el-table-column
        property="url"
        label="菜单地址">
      </el-table-column>
      <el-table-column
        label="操作"
        width="180"
        align="center">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                     @click="rowEdit(scope.$index, scope.row)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                     @click="rowDel(scope.$index, scope.row, $event);"></el-button>
          <el-button circle type="info" plain @click="addModule(scope.row.id)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑弹出层-->
    <el-dialog
      :title="pageName"
      :visible.sync="isShowEditDialog"
      width="430px"
      @close="dialogClose">
      <el-form
        ref="editForm"
        :model="formFileds"
        label-width="55px">
        <el-form-item label="菜单名" prop="moduleName">
          <el-input v-model="formFileds.moduleName"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="url">
          <el-input v-model="formFileds.url"></el-input>
        </el-form-item>
        <el-form-item label="权限码" prop="optValue">
          <el-input v-model="formFileds.optValue"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit()" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="isShowEditDialog = false;" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../../api/TutorialDataApi";

export default {
  name: "Table",
  data() {
    return {
      formFileds:{},
      //tableData: [],
      pageName:'',
      isShowEditDialog: false,
      pid:'',
      tableData: [],
    }
  },
  methods: {
    handleRowClick(row, event, column) {

      // 仅选中当前行
      this.setCurRowChecked(row);
    },
    handleCheckedAllAndCheckedNone(selection) {

      // 当前选中仅一行时操作-（当前表格行高亮）
      1 != selection.length && this.$refs.list.setCurrentRow();
    },
    dialogClose() {

      // 清空编辑表单
      this.$refs.editForm.resetFields();
    },
    rowEdit(index, row) {
      this.isShowEditDialog = true;
      this.pageName='修改菜单';
      axios.get('http://localhost:8081/module/selectModule?id='+ row.id)
        .then(res => {
          if (res.data.code == 2000) {
            this.formFileds = res.data.data
          }
        })
    },
    handleEdit() {
      let param ={...this.formFileds}
      param.pid = this.pid
      axios.post("http://localhost:8081/module/saveModule",param)
        .then(res => {
          if (res.data.code == 2000){
            this.initTableData();
            this.isShowEditDialog = false;
            this.$message.success('保存成功');
          }
        })
    },
    rowDel(index, row, event) {
      // 让当前删除按钮失焦
      event.target.blur();
      this.$confirm('确定要删除当前行吗？', '删除', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        axios.get('http://localhost:8081/module/deleteModule?id='+ row.id)
          .then(res => {
            if (res.data.code == 2000) {
              this.initTableData()
              this.$message.success('保存成功');
            }
          })
      })
    .catch(()=>{}) // 添加错误捕获
    },
    // 选中当前行-当前行的复选框被勾选
    setCurRowChecked(row) {

      this.$refs.list.clearSelection();
      this.$refs.list.toggleRowSelection(row);
    },
    //初始化用户数据
    initTableData() {
      axios.get("http://localhost:8081/module/roleGetPermission")
        .then(res => {
          if (res.data.code == 2000){
            this.tableData = res.data.data;
          }
        })
    },
    //显示添加页面
    showAddPaeg(){
      this.isShowEditDialog = true;
      this.formFileds={};
      this.pageName = '添加目录';
    },
    addModule(id){
        this.isShowEditDialog = true;
        this.pageName='添加子菜单';
        this.pid = id;
    }
  },
  mounted() {
    this.initTableData()
  }
}
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
</style>
